<template>
    <div id="app">
        <div id="poster" :class="dongtai">
            <el-form class="login-container" label-position="left" label-width="0px">
                <h3 class="login_title">系统登录</h3>
                <el-form-item>
                    <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-row type="flex" justify="space-between" align="middle">
                        <el-col :span="16">
                            <el-input type="text" v-model="loginForm.captcha" auto-complete="off" placeholder="验证码"></el-input>
                        </el-col>
                        <el-col :span="7">
                            <el-image class="image-style" @click="GetCaptcha" style="display: block; border-radius: 4px" :src="imageUrl"></el-image>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item style="width: 100%">
                    <el-button type="primary" class="l-btnlog" v-on:click="login">登 录 </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import router from "@/router";
import { Login, Captcha } from "@/service/systemapi";
export default {
    name: "wxllogin",
    data() {
        return {
            imageUrl: "",
            bglist: ["bg2", "bg1", "bg3", "bg4", "bg5", "bg6", "bg7", "bg8", "bg9", "bg10", "bg11", "bg12", "bg13", "bg14", "bg15", "bg16", "bg17", "bg18", "bg19"],
            bgindex: 0,
            dongtai: "bg2",
            loginForm: {
                username: "",
                password: "",
                captcha: ""
            },
            responseResult: [],
            CaptchaId: "",
            isLocked: false
        };
    },
    created() {
        this.keyupSubmit();
        this.CaptchaId = this.$GetGuid();
        if (process.env.NODE_ENV === "development") {
            this.loginForm.username = "admin";
            this.loginForm.password = "admin123";
        }
        this.GetCaptcha();
        var that = this;
        setInterval(function () {
            that.autoBgm();
        }, 5000);
    },
    methods: {
        GetCaptcha() {
            if (this.imageUrl) {
                URL.revokeObjectURL(this.imageUrl);
            }
            Captcha({ id: this.CaptchaId })
                .then(res => {
                    this.imageUrl = URL.createObjectURL(res);
                })
                .catch(err => {
                    this.$message.error("系统异常");
                });
        },
        autoBgm() {
            this.bgindex = this.bgindex + 1;
            if (this.bgindex >= 19) {
                this.bgindex = 0;
            }
            var a = "";
            this.dongtai = this.bglist[this.bgindex];
        },
        login() {
            if (!this.isLocked) {
                this.isLocked = true;
                Login(this.loginForm.username, this.loginForm.password, this.loginForm.captcha, this.CaptchaId)
                    .then(res => {
                        if (res.success) {
                            this.$message({
                                message: "登录成功",
                                type: "success"
                            });
                            localStorage.setItem("token", res.data.token);
                            localStorage.setItem("userName", res.data.name);
                            localStorage.setItem("accountNo", res.data.accountNo);
                            localStorage.setItem("userPower", res.data.power);
                            // localStorage.setItem("isOALogin", "0");
                            router.push("/welcomexczx");
                        } else {
                            this.$message.error(res.msg);
                            this.GetCaptcha();
                        }
                    })
                    .catch(err => {
                        this.$message.error("系统异常");
                        console.log(err);
                    });
                setTimeout(() => {
                    this.isLocked = false; // 重置定时器ID
                }, 2000);
            }
        },
        keyupSubmit() {
            document.onkeydown = e => {
                let _key = window.event.keyCode;
                //!this.clickState是防止用户重复点击回车&& !this.clickState
                if (_key === 13) {
                    if (this.$route.path == "/login" || this.$route.path == "/") {
                        this.login();
                    }
                }
            };
        }
    },
    beforeDestroy() {
        // 组件销毁前释放 URL 对象
        if (this.imageUrl) {
            URL.revokeObjectURL(this.imageUrl);
        }
        document.onkeydown = null;
    }
};
</script>

<style scoped>
body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-family: Arial, sans-serif; /* 设置字体 */
}
.l-btnlog {
    width: 100%;
    /* background: #2673c7; */
    background: #cdd8e5;
    border: none;
    font-weight: bold;
    font-size: 20px;
    color: #867e7e;
}
.image-style:hover {
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    /* 其他悬停时的样式 */
}
.l-btnlog:hover {
    /* background: rgb(86, 86, 88); */
    background: #dfe2e5;
}

.bg1 {
    background: url("../../assets/images/1.jpg") no-repeat;
}
.bg2 {
    background: url("../../assets/images/2.jpg") no-repeat;
}
.bg3 {
    background: url("../../assets/images/3.jpg") no-repeat;
}
.bg4 {
    background: url("../../assets/images/4.jpg") no-repeat;
}
.bg5 {
    background: url("../../assets/images/5.jpg") no-repeat;
}
.bg6 {
    background: url("../../assets/images/6.jpg") no-repeat;
}
.bg7 {
    background: url("../../assets/images/7.jpg") no-repeat;
}
.bg8 {
    background: url("../../assets/images/8.jpg") no-repeat;
}
.bg9 {
    background: url("../../assets/images/9.jpg") no-repeat;
}
.bg10 {
    background: url("../../assets/images/10.jpg") no-repeat;
}
.bg11 {
    background: url("../../assets/images/11.jpg") no-repeat;
}
.bg12 {
    background: url("../../assets/images/12.jpg") no-repeat;
}
.bg13 {
    background: url("../../assets/images/13.jpg") no-repeat;
}
.bg14 {
    background: url("../../assets/images/14.jpg") no-repeat;
}
.bg15 {
    background: url("../../assets/images/15.jpg") no-repeat;
}
.bg16 {
    background: url("../../assets/images/16.jpg") no-repeat;
}
.bg17 {
    background: url("../../assets/images/17.jpg") no-repeat;
}
.bg18 {
    background: url("../../assets/images/18.jpg") no-repeat;
}
.bg19 {
    background: url("../../assets/images/19.jpg") no-repeat;
}
#poster {
    /* background: url("../../assets/images/19.jpg") no-repeat; */
    background-color: #4574a3;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
}

body {
    margin: 0px;
    padding: 0;
}

.login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 230px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    /* background: #fff; */
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid #eaeaea;
    /* box-shadow: 0 0 25px #cac6c6; */

    /* box-shadow:
      5px 5px 12px rgba(0, 0, 0, .4),
      -1px -1px 12px rgba(255, 255, 255, .9); */

    box-shadow: 5px 5px 12px rgba(255, 255, 255, 0.9), -1px -1px 12px rgba(255, 255, 255, 0.9);
}

.login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    /* color: #505458; */
    color: #fff;
}
</style>
